<template>
  <div class="home">
    <!-- <HelloWorld msg="Welcome to Your Vue.js App"/> -->
    <timer-btn :interval="interval" :timerId="timerId" @show="showData" ref="mytimer" ></timer-btn>
    <button @click="setTimer">设置间隔</button>
  </div>
</template>

<script>
// @ is an alias to /src
import HelloWorld from '@/components/HelloWorld.vue'
import TimerBtn from '@/components/TimerBtn.vue'

export default {
  name: 'HomeView',
  components: {
    HelloWorld,
    TimerBtn
  },
  data() {
    return {
      interval:5,
      timerId:9
    }
  },
  methods: {
    setTimer() {
      this.interval = 10
    },
    //通过this.$emit('事件名','参数')
    //子组件向父组件传值
    showData(str) {
      //通过子组件触发的事件
      alert('子组件触发了该组件'+str)
    }
  },
  mounted() {
    this.setTimer()
    //this.$refs['ref的属性值'].子组件方法调用,会有性能损耗
    this.$refs['mytimer'].showData()
  }
}
</script>
